<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            border: none;
        }
        img{
            vertical-align: top;
        }
        .slider{
            width: 310px;
            height: 260px;
            border:1px solid #cccccc;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .slider-scroll{
            width: 310px;
            height: 220px;
            position: relative;
        }
        .slider-main{
            width: 620px;
            height: 220px;
            background: #3dbaf0;
        }
        .slider-main-img{
            width: 310px;
            height: 220px;
            position: absolute;
        }
        .slider-main-img img{
            width: 100%;
            height: 100%;
        }
        .slider-ctl{
            /*width: 100px;*/
            /*height: 100px;*/
            /*background: red;*/
            cursor: pointer;
            text-align: center;
        }
        .slider-ctl-prev,.slider-ctl-next{
            background: url("images/icon.png");
            width: 20px;
            height: 34px;
            position: absolute;
            top: 50%;
            margin-top: -35px;
        }
        .slider-ctl-prev{
            left: 5px;
        }
        .slider-ctl-next{
            background-position: -9px -45px;
            right: 5px;
        }
        .slider-ctl-icon{
            width: 24px;
            height: 5px;
            background: url("images/icon.png") no-repeat -24px -790px;
            display: inline-block;
            margin: 5px;

            text-indent: 20em;
        }

        .current{
            background-position: 0 -770px;
        }
    </style>
    <script src="js/myFunc.js"></script>
</head>
<body>
<div id="slider" class="slider">
    <div id="slider_scroll" class="slider-scroll">
        <div class="slider-main" id="slider_main">
            <div class="slider-main-img">
                <a href="">
                    <img src="images/1.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/2.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/3.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/4.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/5.jpeg" alt="">
                </a>
            </div>
            <div class="slider-main-img">
                <a href="">
                    <img src="images/6.jpeg" alt="">
                </a>
            </div>
        </div>
    </div>
    <div class="slider-ctl" id="slider_ctl">
        <span class="slider-ctl-prev"></span>
        <span class="slider-ctl-next"></span>
    </div>
</div>
<script>
    window.onload = function () {
        var slider = document.getElementById("slider");
        var slider_main = document.getElementById("slider_main");
        var slider_main_img = slider_main.children;
        var slider_ctl = document.getElementById("slider_ctl");
        var iNow = 0;
        for(var i = 0;i<slider_main_img.length;i++){
            var span = document.createElement("span");
            span.className="slider-ctl-icon";
            span.innerText = slider_main_img.length - i - 1;
            slider_ctl.insertBefore(span,slider_ctl.children[1]);
        }
        slider_ctl.children[1].className="slider-ctl-icon current";
        var leftW = slider.offsetWidth;
        for(var j = 1;j<slider_main_img.length;j++){
            slider_main_img[j].style.left = leftW+"px";
        }
        var ctl_child = slider_ctl.children;
        for(var s=0;s<ctl_child.length;s++){
            var spans = ctl_child[s];
            spans.onmousedown = function () {
                if(this.className==="slider-ctl-prev"){
                    buffer(slider_main_img[iNow],{"left":leftW});
                    iNow--;
                    if(iNow < 0){
                        iNow = slider_main_img.length - 1;
                    }
                    /*buffer(slider_main_img[iNow],{"left":leftW});*/
                    slider_main_img[iNow].style.left=-leftW+"px";
                    buffer(slider_main_img[iNow],{"left":0});
                }else if(this.className==="slider-ctl-next"){
                    buffer(slider_main_img[iNow],{"left":-leftW});
                    iNow++;
                    if(iNow >= slider_main_img.length){
                        iNow = 0;
                    }
                    /*buffer(slider_main_img[iNow],{"left":leftW});*/
                    slider_main_img[iNow].style.left=leftW+"px";
                    buffer(slider_main_img[iNow],{"left":0});
                }else {
                    var index = parseInt(this.innerText);
                    if(index>iNow){
                        buffer(slider_main_img[iNow],{"left":-leftW});
                        slider_main_img[index].style.left=leftW+"px";
                        iNow = index;
                        buffer(slider_main_img[iNow],{"left":0});
                    }else if(index<iNow){
                        buffer(slider_main_img[iNow],{"left":leftW});
                        slider_main_img[index].style.left=-leftW+"px";
                        iNow = index;
                        buffer(slider_main_img[iNow],{"left":0});
                    }
                }
                changeIndex();
            }
        }
        function changeIndex() {
            for(var i=1;i<ctl_child.length-1;i++){
                ctl_child[i].className="slider-ctl-icon";
            }
            ctl_child[iNow+1].className="slider-ctl-icon current"
        }
        var timer = setInterval(autoPlay,1000);

        function autoPlay() {
            buffer(slider_main_img[iNow],{"left":-leftW});
            iNow++;
            if(iNow >= slider_main_img.length){
                iNow = 0;
            }

            slider_main_img[iNow].style.left=leftW+"px";
            buffer(slider_main_img[iNow],{"left":0});
            changeIndex();
        }
        slider.onmouseover = function () {
            clearInterval(timer);
        };

        slider.onmouseout = function () {
            timer = setInterval(autoPlay, 1000);
        }
    }
</script>
</body>
</html>